<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-width="auto"
    v-loading="formLoading"
  >
    <el-row :span="24">
      <el-col :span="12">
        <el-form-item label="申请编号:" prop="applyCode">
          {{ formData.applyCode}}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申请人:" prop="applyUserId">
          {{ applyUserList.find(v => v.id === formData.applyUserId)?.nickname || '' }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系方式:" prop="phone">
          {{ formData.phone }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="使用期限:" prop="useEndTime">
          {{ formatDate(formData.useEndTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="使用理由:" prop="applyReson">
          {{ formData.applyReson }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="附件" prop="file">
          <UploadFile 
            v-model="formData.file" 
            :limit="1"
            :fileSize="200"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider content-position="left">数字资源</el-divider>
    <el-form-item prop="sourceList" label-width="0">
      <div class="flex items-center justify-end" style="width: 100%;">
        <el-button
          type="primary"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['dr:source-apply:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </div>
      <el-table :data="formData.sourceList" :stripe="true" :show-overflow-tooltip="true">
        <!-- <el-table-column label="主键" align="center" prop="id" /> -->
        <el-table-column label="资源编号" align="center" prop="sourceCode" />
        <el-table-column label="封面" align="center" prop="mainImage">
          <template #default="scope">
            <el-image
              style="width: 44px; height: 44px;"
              :src="scope.row.mainImage"
              :preview-src-list="[scope.row.mainImage]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="资源名称" align="center" prop="sourceName" />
        <el-table-column label="资源类型" align="center" prop="sourceType">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="scope.row.sourceType" />
          </template>
        </el-table-column>
        <el-table-column label="来源信息" align="center" prop="sourceDesc">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_DESC" :value="scope.row.sourceDesc" />
          </template>
        </el-table-column>
        <el-table-column label="资源来源" align="center" prop="sourceFrom">
          <template #default="scope">
            <!-- <dict-tag :type="DICT_TYPE.SOURCE_FROM" :value="scope.row.sourceFrom" /> -->
            {{ scope.row.sourceFrom }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="60px" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openDetail(scope.row)"
              v-hasPermi="['dr:source:query']"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
  <div style="text-align: center;">
    <el-button @click="handleBpm" type="primary">流程图</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </div>

  <!-- 资源详情 -->
  <SourceDetail v-model:visible="detailVisible" :data="currentRow" />
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { SourceVO } from '@/api/dr/source'
import { SourceApplyApi, SourceApplyVO } from '@/api/dr/sourceapply'
import { getSimpleUserList } from '@/api/system/user'

defineOptions({ name: 'SourceApplyDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
const message = useMessage() // 消息弹窗
// 弹窗的标题
const applyUserList = ref<any>([]) // 申请人列表
const formLoading = ref(false)
const exportLoading = ref(false) // 导出的加载中
const detailVisible = ref<boolean>(false)
const currentRow = ref<SourceVO>()

const	formData = ref<SourceApplyVO | any>({})
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await SourceApplyApi.exportSourceApply({})
    download.excel(data, '资源利用.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// 详情弹窗
const openDetail = (row: any) => {
  currentRow.value = { ...row }
  detailVisible.value = true
}
// 流程图
const handleBpm = () => {

}
const getDetail = () => {
  formLoading.value = true
  SourceApplyApi.getSourceApply(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
  }).finally(() => {
    formLoading.value = false
  })
}
const getOptions = () => {
  getSimpleUserList().then(list => {
    // console.log('getSimpleUserList', list)
    applyUserList.value = list
  })
}
const open = () => {
  getDetail()
  getOptions()
}
onMounted(() => {
  open()
})
</script>

<style lang="scss" scoped>
</style>
